Skip to content

feat: expose Monaco and Dynamic Page as Web Components#3579

Merged
mrCherry97 merged 18 commits intokyma-project:mainfrom
OliwiaGowor:expose-web-components
Jan 22, 2025
Merged

feat: expose Monaco and Dynamic Page as Web Components#3579
mrCherry97 merged 18 commits intokyma-project:mainfrom
OliwiaGowor:expose-web-components

Conversation

@OliwiaGowor
Copy link
Contributor

@OliwiaGowor OliwiaGowor commented Jan 13, 2025 •
edited
Loading

Description

Changes proposed in this pull request:

  • added a generic function for creating Web Components
  • added Monaco Editor Web Component
  • added Dynamic Page Web Component
  • added documentation for Web Components

Related issue(s)
Closes #3520

Definition of done

  • The PR's title starts with one of the following prefixes:
    • feat: A new feature
    • fix: A bug fix
    • docs: Documentation only changes
    • refactor: A code change that neither fixes a bug nor adds a feature
    • test: Adding tests
    • chore: Maintainance changes to the build process or auxiliary tools, libraries, workflows, etc.
  • Related issues are linked. To link internal trackers, use the issue IDs like backlog#4567
  • Explain clearly why you created the PR and what changes it introduces
  • All necessary steps are delivered, for example, tests, documentation, merging

@kyma-bot kyma-bot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. cla: yes Indicates the PR's author has signed the CLA. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Jan 13, 2025
@OliwiaGowor OliwiaGowor marked this pull request as ready for review January 13, 2025 06:41
@kyma-bot kyma-bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 13, 2025
chriskari
chriskari previously approved these changes Jan 13, 2025
View reviewed changes
@kyma-bot kyma-bot added the lgtm Looks good to me! label Jan 13, 2025
@mrCherry97
Copy link
Contributor

mrCherry97 commented Jan 14, 2025

/hold @pbochynski review

@kyma-bot kyma-bot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Jan 14, 2025
@kyma-bot kyma-bot removed the lgtm Looks good to me! label Jan 14, 2025
pbochynski
pbochynski reviewed Jan 14, 2025
View reviewed changes
Copy link
Contributor

@pbochynski pbochynski left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The script for custom extension is loaded only if web component defined in general.customElement is not defined yet. The idea was that all custom extensions introduce own custom elements and this way we can lazily load the script (only once: see the code). The example provided in this PR is not complete (missing general section) and does not define a web component for custom extension. If developers will start to use it as it is it will work, but with each render of the custom extension script element will be added to the DOM document. I am not sure if it is intended.

@kyma-bot kyma-bot removed the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Jan 15, 2025
@kyma-bot kyma-bot added the size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. label Jan 15, 2025
pbochynski
pbochynski reviewed Jan 16, 2025
View reviewed changes
Copy link
Contributor

@pbochynski pbochynski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice if the example uses dynamic page and looks exactly as other views. Currenlty it is displayed like this:
Screenshot 2025-01-16 at 08 52 12
It would be nice if it looks like this:
Screenshot 2025-01-16 at 08 56 02

pbochynski
pbochynski reviewed Jan 16, 2025
View reviewed changes
examples/busola-web-components/README.md Outdated

# Set Up Your Custom Busola Extension

To set up and deploy this exmaple, follow [this]('examples/../../custom-extension/README.md) documentation.
Copy link
Contributor

@pbochynski pbochynski Jan 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To set up and deploy this exmaple, follow [this]('examples/../../custom-extension/README.md) documentation.
To apply this example in your cluster execute:
```bash
kubectl kustomize . | kubectl apply -n kyma-system -f -

For more information follow this documentation.

Copy link
Contributor

@grego952 grego952 Jan 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This command is provided as an alternative in the Custom Extension README. Does it mean that this command covers all previous steps (1. Enable custom extensions in your cluster, 2. Adjust the static HTML content, etc)? Or should a user execute this one first and then follow 1., 2., 3. 4. from the example?

grego952
grego952 reviewed Jan 17, 2025
View reviewed changes
examples/busola-web-components/README.md Outdated

# Set Up Your Custom Busola Extension

To set up and deploy this exmaple, follow [this]('examples/../../custom-extension/README.md) documentation.
Copy link
Contributor

@grego952 grego952 Jan 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This command is provided as an alternative in the Custom Extension README. Does it mean that this command covers all previous steps (1. Enable custom extensions in your cluster, 2. Adjust the static HTML content, etc)? Or should a user execute this one first and then follow 1., 2., 3. 4. from the example?

grego952
grego952 reviewed Jan 17, 2025
View reviewed changes
grego952
grego952 reviewed Jan 20, 2025
View reviewed changes
@kyma-bot kyma-bot added the lgtm Looks good to me! label Jan 20, 2025
@mrCherry97 mrCherry97 removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Jan 22, 2025
@mrCherry97 mrCherry97 merged commit eb91cbf into kyma-project:main Jan 22, 2025
15 checks passed
@OliwiaGowor OliwiaGowor deleted the expose-web-components branch February 6, 2025 14:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pbochynski pbochynski pbochynski left review comments

@grego952 grego952 grego952 approved these changes

@chriskari chriskari chriskari approved these changes

@akucharska akucharska Awaiting requested review from akucharska akucharska is a code owner

@mrCherry97 mrCherry97 Awaiting requested review from mrCherry97 mrCherry97 is a code owner

@dbadura dbadura Awaiting requested review from dbadura dbadura is a code owner

Assignees

@pbochynski pbochynski

@grego952 grego952

@chriskari chriskari

Labels

cla: yes Indicates the PR's author has signed the CLA. lgtm Looks good to me! size/XL Denotes a PR that changes 500-999 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Expose Monaco Code Editor as a Web Component for Custom Extensions

6 participants

@OliwiaGowor @mrCherry97 @pbochynski @grego952 @chriskari @kyma-bot